<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 主题切换演示 - 类名绑定实战</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* 基础样式 */
        .app-container {
            min-height: 100vh;
            padding: 20px;
            transition: all 0.3s ease;
            font-family: Arial, sans-serif;
        }
        
        .theme-selector {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
        }
        
        .theme-selector select {
            padding: 8px 15px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: white;
            cursor: pointer;
            font-size: 16px;
        }
        
        .news-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .news-image {
            text-align: center;
            margin: 20px 0;
        }
        
        .news-image img {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .news-content p {
            line-height: 1.6;
            margin-bottom: 15px;
            text-align: justify;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        
        /* 日间主题样式 */
        .day {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .day .news-container {
            background-color: white;
            color: #333;
        }
        
        .day .theme-selector select {
            border-color: #ddd;
        }
        
        /* 夜间主题样式 */
        .night {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }
        
        .night .news-container {
            background-color: #2d2d2d;
            color: #e0e0e0;
        }
        
        .night .theme-selector select {
            background-color: #3d3d3d;
            color: #e0e0e0;
            border-color: #555;
        }
        
        .night h1 {
            color: #ffffff;
        }
        
        /* 多彩主题样式 */
        .colorful {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
        }
        
        .colorful .news-container {
            background-color: rgba(255, 255, 255, 0.9);
            color: #333;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .colorful .theme-selector select {
            background-color: rgba(255, 255, 255, 0.8);
            color: #764ba2;
            border-color: #ffffff;
            font-weight: bold;
        }
        
        .colorful h1 {
            color: #764ba2;
        }
        
        .colorful .news-image img {
            border: 3px solid #764ba2;
        }
        
        /* 多巴胺主题样式 */
        .dopamine {
            background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7, #DDA0DD, #98D8C8);
            background-size: 400% 400%;
            animation: dopamineGradient 15s ease infinite;
            color: #2D3436;
        }
        
        .dopamine .news-container {
            background-color: rgba(255, 255, 255, 0.85);
            color: #2D3436;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            transform: rotate(-1deg);
        }
        
        .dopamine .news-container:hover {
            transform: rotate(0deg) scale(1.02);
            transition: transform 0.3s ease;
        }
        
        .dopamine .theme-selector select {
            background-color: rgba(255, 255, 255, 0.9);
            color: #E17055;
            border-color: #FDCB6E;
            font-weight: bold;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .dopamine h1 {
            color: #E17055;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            transform: rotate(1deg);
        }
        
        .dopamine .news-image img {
            border: 4px solid #FDCB6E;
            transform: rotate(-1deg);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .dopamine .news-content p {
            font-weight: 500;
            color: #2D3436;
        }
        
        .dopamine .news-content p:nth-child(odd) {
            color: #6C5CE7;
            transform: rotate(0.5deg);
        }
        
        .dopamine .news-content p:nth-child(even) {
            color: #00B894;
            transform: rotate(-0.5deg);
        }
        
        @keyframes dopamineGradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    </style>
    <!-- 使用简化版Vue 3功能模拟 -->
    <script>
    // 简化版Vue 3功能，只实现示例所需的核心功能
    const Vue = {
        ref: (value) => {
            const refObj = { value };
            return refObj;
        },
        computed: (getter) => {
            // 简化版计算属性，实际Vue中会有依赖收集和缓存
            const computedObj = {
                get value() {
                    return getter();
                }
            };
            return computedObj;
        },
        createApp: (options) => {
            return {
                mount: (selector) => {
                    const el = document.querySelector(selector);
                    const app = {
                        data: {},
                        methods: {}
                    };
                    
                    // 模拟setup函数
                    if (options.setup) {
                        const setupResult = options.setup();
                        Object.assign(app.data, setupResult);
                    }
                    
                    // 模拟数据绑定
                    const bindData = () => {
                        // 绑定主题类
                        if (app.data.themeClass && app.data.currentTheme) {
                            el.querySelector('.app-container').className = 'app-container ' + app.data.currentTheme.value;
                        }
                        
                        // 绑定选择器
                        const select = el.querySelector('select');
                        if (select && app.data.currentTheme) {
                            select.value = app.data.currentTheme.value;
                            select.onchange = () => {
                                app.data.currentTheme.value = select.value;
                                bindData(); // 重新绑定数据
                            };
                        }
                    };
                    
                    // 初始化绑定
                    bindData();
                    
                    return app;
                }
            };
        }
    };
    </script>
</head>
<body>
    <div id="app">
        <div class="app-container" :class="themeClass">
            <!-- 右上角的主题选择下拉列表 -->
            <div class="theme-selector">
                <select v-model="currentTheme" style="display: flex; align-items: center; gap: 8px;">
                    <option value="day">
                        <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
                            <circle cx="12" cy="12" r="5" fill="#f1c40f"/>
                            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="#f1c40f" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        日
                    </option>
                    <option value="night">
                        <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
                            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" fill="#34495e" stroke="#95a5a6" stroke-width="1"/>
                        </svg>
                        夜
                    </option>
                    <option value="colorful">
                        <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
                            <circle cx="6" cy="6" r="3" fill="#e74c3c"/>
                            <circle cx="18" cy="6" r="3" fill="#3498db"/>
                            <circle cx="6" cy="18" r="3" fill="#2ecc71"/>
                            <circle cx="18" cy="18" r="3" fill="#f39c12"/>
                            <circle cx="12" cy="12" r="3" fill="#9b59b6"/>
                        </svg>
                        多彩
                    </option>
                    <option value="dopamine">
                        <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#ff6b6b"/>
                            <circle cx="12" cy="12" r="4" fill="#4ecdc4"/>
                        </svg>
                        多巴胺
                    </option>
                </select>
            </div>
        
            <!-- 新闻内容区域 -->
            <div class="news-container">
                <h1>特朗普发布争议性AI视频引发全美抗议</h1>
                <div class="news-image" style="height: 300px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 8px; overflow: hidden;">
                    <!-- SVG图像：新闻主题相关的图标 -->
                    <svg width="400" height="250" viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
                        <!-- 背景 -->
                        <rect width="400" height="250" fill="#ffffff" />
                        
                        <!-- 标题区域 -->
                        <rect x="20" y="20" width="360" height="40" rx="5" fill="#3498db" />
                        <text x="200" y="45" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">新闻报道</text>
                        
                        <!-- 内容图标 -->
                        <g transform="translate(50, 80)">
                            <!-- 人物图标 -->
                            <circle cx="50" cy="50" r="40" fill="#e74c3c" />
                            <circle cx="35" cy="35" r="5" fill="white" />
                            <circle cx="65" cy="35" r="5" fill="white" />
                            <path d="M 35 55 Q 50 70 65 55" stroke="white" stroke-width="3" fill="none" />
                        </g>
                        
                        <!-- 抗议者图标 -->
                        <g transform="translate(180, 80)">
                            <circle cx="20" cy="40" r="15" fill="#f39c12" />
                            <rect x="10" y="55" width="20" height="30" fill="#2c3e50" rx="2" />
                            <path d="M 10 65 L 0 70 L 20 80 L 30 75" fill="none" stroke="#3498db" stroke-width="2" />
                        </g>
                        
                        <g transform="translate(230, 85)">
                            <circle cx="20" cy="35" r="15" fill="#9b59b6" />
                            <rect x="10" y="50" width="20" height="30" fill="#2c3e50" rx="2" />
                            <path d="M 10 60 L 0 65 L 20 75 L 30 70" fill="none" stroke="#3498db" stroke-width="2" />
                        </g>
                        
                        <g transform="translate(280, 80)">
                            <circle cx="20" cy="40" r="15" fill="#1abc9c" />
                            <rect x="10" y="55" width="20" height="30" fill="#2c3e50" rx="2" />
                            <path d="M 10 65 L 0 70 L 20 80 L 30 75" fill="none" stroke="#3498db" stroke-width="2" />
                        </g>
                        
                        <!-- 设备图标 -->
                        <g transform="translate(150, 140)">
                            <rect x="-40" y="-30" width="80" height="60" rx="5" fill="#ecf0f1" stroke="#7f8c8d" stroke-width="2" />
                            <rect x="-35" y="-25" width="70" height="40" fill="#2c3e50" />
                            <rect x="-30" y="20" width="60" height="5" rx="2" fill="#bdc3c7" />
                            <circle cx="-10" cy="20" r="2" fill="#2c3e50" />
                            <circle cx="10" cy="20" r="2" fill="#2c3e50" />
                            <path d="M -20 0 L -10 -10 L 0 0 L 10 -10 L 20 0" stroke="#e74c3c" stroke-width="3" fill="none" />
                        </g>
                        
                        <!-- 标题文本 -->
                        <text x="200" y="200" font-family="Arial" font-size="14" fill="#34495e" text-anchor="middle">争议性内容引发讨论</text>
                        
                        <!-- 装饰元素 -->
                        <path d="M 20 220 Q 200 240 380 220" stroke="#bdc3c7" stroke-width="2" fill="none" stroke-dasharray="5,5" />
                    </svg>
                </div>
                <div class="news-content">
                    <p>2025年10月18日，美国前总统特朗普在自己的社交媒体上发布了一条极具争议的人工智能制作视频，引发全美范围内的抗议浪潮。</p>
                    <p>在这段AI生成的视频中，特朗普本人头戴金色王冠，驾驶着战斗机翱翔在示威群众的头顶上，然后向人群投放大便。这一荒诞场景迅速在社交媒体上传播，引发公众强烈不满。</p>
                    <p>抗议者的主要诉求是反对特朗普政府存在的独裁倾向，他们高举"民主而非君主"、"我们人民"等标语，强调美国没有国王，反对总统拥有绝对权力。</p>
                    <p>值得注意的是，就在前一天，特朗普在接受福克斯新闻频道采访时还表示："他们把我比作国王，可我不是国王。"然而采访播出后不久，他就发布了这段自比国王的AI视频。</p>
                    <p>副总统万斯也针锋相对地发布了他和特朗普加冕成为国王的照片，白宫也发布了类似的照片。特朗普所属的共和党则把这些活动贬斥为"仇恨美国集会"。</p>
                    <p>这是特朗普重返白宫之后，美国民众举行的第三次大规模抗议集会。目前美国政府已经停摆18天，这次停摆不仅导致联邦项目与服务关停，还考验着美国核心的权力制衡体系。</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 使用全局Vue对象
        const { createApp, ref, computed } = Vue;

        createApp({
            setup() {
                // 创建响应式变量来存储当前选择的主题
                const currentTheme = ref('day');
                
                // 计算属性，根据当前主题返回对应的类名
                const themeClass = computed(() => {
                    return currentTheme.value;
                });
                
                // 这里简化了处理，直接使用v-model绑定，不需要changeTheme函数
                
                return {
                    currentTheme,
                    themeClass
                };
            }
        }).mount('#app');
    </script>

    <div style="text-align: center; margin-top: 30px; padding: 20px; background: #fff; max-width: 800px; margin-left: auto; margin-right: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h2>Vue 3 类名绑定技术要点</h2>
        <pre style="text-align: left; background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
// 1. 使用ref创建响应式状态
const currentTheme = ref('day');

// 2. 使用computed创建计算属性，返回主题类名
const themeClass = computed(() => {
    return currentTheme.value;
});

// 3. 在模板中使用:class绑定
&lt;div :class="themeClass"&gt;内容&lt;/div&gt;

// 4. 使用v-model实现双向绑定
&lt;select v-model="currentTheme"&gt;</pre>
        <p>这个示例展示了Vue 3中使用&lt;script setup&gt;语法和计算属性来实现主题切换，是类名绑定的一个实际应用案例。</p>
    </div>
</body>
</html>